<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏网站</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="fonts/iconfont.css">

    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
        <div class="w header">
            <nav class="nav">
                <a href="#" class="logo">
                    <img src="images/logo.png" alt="">
                </a>
                <ul class="nav-meau">
                    <li><a href="备份文件/Index.html">首页</a></li>
                    <li><a href="blog.html">论坛</a></li>
                    <li><a href="video.html" class="active">视频</a></li>
                    <li><a href="faq.html">问答</a></li>
                    <li><a href="about.html">联系我们</a></li>
                </ul>
            </nav>
            <ul class="user">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
    </header>

    <div class="header-bg">
        <img src="images/banner3.jpg" alt="">
        <div class="title">
            视频
        </div>
    </div>


    <div class="content w py-3 contentVideo">
        <div class="content-l">
            <h4 class="mb-3">游戏资讯</h4>
            <div class="row">


                <div class="col-4">
                    <div class="card item" data-src="">
                        <div class="pic">
                            <img class="card-img-top" src="images/pic1.jpg" alt="">
                        </div>
                        <div class="card-body p-2">
                            <h5 class="card-title">视频标题</h5>
                            <p class="card-text">啦啦啦啦啦啦啦啦</p>
                        </div>
                    </div>
                </div>


                <div class="col-4">
                    <div class="card item" data-src="">
                        <div class="pic">
                            <img class="card-img-top" src="images/pic2.jpg" alt="">
                        </div>
                        <div class="card-body p-2">
                            <h5 class="card-title">视频标题</h5>
                            <p class="card-text">啦啦啦啦啦啦啦啦</p>
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="card item" data-src="">
                        <div class="pic">
                            <img class="card-img-top" src="images/banner1.jpg" alt="">
                        </div>
                        <div class="card-body p-2">
                            <h5 class="card-title">视频标题</h5>
                            <p class="card-text">啦啦啦啦啦啦啦啦</p>
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="card item" data-src="">
                        <div class="pic">
                            <img class="card-img-top" src="images/banner2.jpg" alt="">
                        </div>
                        <div class="card-body p-2">
                            <h5 class="card-title">视频标题</h5>
                            <p class="card-text">啦啦啦啦啦啦啦啦</p>
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="card item" data-src="">
                        <div class="pic">
                            <img class="card-img-top" src="images/banner3.jpg" alt="">
                        </div>
                        <div class="card-body p-2">
                            <h5 class="card-title">视频标题</h5>
                            <p class="card-text">啦啦啦啦啦啦啦啦</p>
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="card item" data-src="">
                        <div class="pic">
                            <img class="card-img-top" src="images/banner4.jpg" alt="">
                        </div>
                        <div class="card-body p-2">
                            <h5 class="card-title">视频标题</h5>
                            <p class="card-text">啦啦啦啦啦啦啦啦</p>
                        </div>
                    </div>
                </div>
            </div>
            <h4 class="mb-3">游戏攻略</h4>
            <div class="row">
                <div class="col-4">
                    <div class="card item" data-src="">
                        <div class="pic">
                            <img class="card-img-top" src="images/pic1.jpg" alt="">
                        </div>
                        <div class="card-body p-2">
                            <h5 class="card-title">视频标题</h5>
                            <p class="card-text">啦啦啦啦啦啦啦啦</p>
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="card item" data-src="">
                        <div class="pic">
                            <img class="card-img-top" src="images/pic2.jpg" alt="">
                        </div>
                        <div class="card-body p-2">
                            <h5 class="card-title">视频标题</h5>
                            <p class="card-text">啦啦啦啦啦啦啦啦</p>
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="card item" data-src="">
                        <div class="pic">
                            <img class="card-img-top" src="images/banner2.jpg" alt="">
                        </div>
                        <div class="card-body p-2">
                            <h5 class="card-title">视频标题</h5>
                            <p class="card-text">啦啦啦啦啦啦啦啦</p>
                        </div>
                    </div>
                </div>



            </div>
        </div>
        <div class="content-r">

            <h4 class="mb-3">网站信息</h4>
            <footer class="footer shadow-lg">
                <p>健康提示</p>
                <p>啦啦啦游戏网,小朋友快来玩啊!</p>
                <p>友情链接</p>
                <p>
                    <a href="#">百度</a>
                    <a href="#">百度</a>
                    <a href="#">百度</a>
                    <a href="#">百度</a>
                </p>
            </footer>
        </div>
    </div>

    <!-- 浮动播放框 -->
    <div class="fixedVideo">
        <div class="videoBox">
            <video src="" controls></video>
            <button class="btn-close">X</button>
        </div>
    </div>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        var videoSrc = [
            'images/2.mp4',
            'images/2.mp4',
            'images/2.mp4',
            'images/2.mp4'
        ]
        $.each(videoSrc, (index, item) => {
            $('.contentVideo .item').eq(index).attr('data-src', item)
        })

        $('.btn-close').on('click', function () {
            $('.fixedVideo').fadeOut()
        })

        $('.contentVideo .item').on('click', function () {
            $('.fixedVideo').fadeIn()
            $('.fixedVideo video').attr('src', $(this).attr('data-src'))
        })
    </script>
</body>

</html>
